<template>
  <div class="home">
    <el-carousel height="400px" class="banner">
      <el-carousel-item v-for="(banner, index) in banners" :key="index">
        <div
          class="banner-item"
          :style="{ backgroundImage: `url(${banner.image})` }"
        >
          <div class="banner-content">
            <h2>{{ banner.title }}</h2>
            <p>{{ banner.description }}</p>
            <el-button type="primary" size="large" @click="$router.push(banner.link)">
              {{ banner.buttonText }}
            </el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="features">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(feature, index) in features" :key="index">
          <el-card class="feature-card">
            <el-icon size="40" class="feature-icon">
              <component :is="feature.icon" />
            </el-icon>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="new-books">
      <h2 class="section-title">新书上架</h2>
      <el-row :gutter="20">
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          v-for="book in newBooks"
          :key="book.id"
        >
          <el-card class="book-card" :body-style="{ padding: '0px' }">
            <img :src="book.cover" class="book-image" />
            <div class="book-info">
              <h3>{{ book.title }}</h3>
              <p class="author">{{ book.author }}</p>
              <div class="price-action">
                <span class="price">¥{{ book.price }}</span>
                <el-button
                  type="primary"
                  size="small"
                  @click="$router.push(`/book/${book.id}`)"
                >
                  查看详情
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getBooks } from '@/api/book'
import type { Book } from '@/api/book'

const banners = [
  {
    image: 'https://picsum.photos/1920/400?random=1',
    title: '发现好书',
    description: '浏览我们精选的图书收藏',
    link: '/books',
    buttonText: '立即浏览'
  },
  {
    image: 'https://picsum.photos/1920/400?random=2',
    title: '特价优惠',
    description: '限时特价，折扣多多',
    link: '/books',
    buttonText: '查看优惠'
  },
  {
    image: 'https://picsum.photos/1920/400?random=3',
    title: '新书上架',
    description: '发现最新上架的好书',
    link: '/books',
    buttonText: '了解更多'
  }
]

const features = [
  {
    icon: 'Truck',
    title: '快速配送',
    description: '全国范围内48小时送达'
  },
  {
    icon: 'Service',
    title: '优质服务',
    description: '7x24小时客户支持'
  },
  {
    icon: 'GoldMedal',
    title: '品质保证',
    description: '正品保障，假一赔十'
  }
]

const newBooks = ref<Book[]>([])
const loading = ref(true)
const error = ref<string | null>(null)

const loadNewBooks = async () => {
  try {
    loading.value = true
    error.value = null
    const res = await getBooks({ page: 1, size: 8, sort: 'createdAt,desc' })
    newBooks.value = res.content
  } catch (err) {
    console.error('Failed to load new books:', err)
    error.value = '加载图书数据失败，请稍后重试'
    // 使用一些默认数据
    newBooks.value = Array(4).fill(null).map((_, index) => ({
      id: index + 1,
      title: `示例图书 ${index + 1}`,
      author: '作者名称',
      price: 29.9,
      cover: `https://picsum.photos/200/300?random=${index}`,
      description: '图书描述...',
      createdAt: new Date().toISOString()
    }))
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadNewBooks()
})
</script>

<style scoped>
.home {
  padding-bottom: 40px;
}

.banner {
  margin-bottom: 40px;
}

.banner-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 100px;
}

.banner-content {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-content h2 {
  font-size: 48px;
  margin-bottom: 20px;
}

.banner-content p {
  font-size: 24px;
  margin-bottom: 30px;
}

.features {
  margin-bottom: 40px;
}

.feature-card {
  text-align: center;
  padding: 30px;
}

.feature-icon {
  color: #409eff;
  margin-bottom: 20px;
}

.feature-card h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
}

.feature-card p {
  color: #666;
  margin: 0;
}

.section-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 32px;
}

.book-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.book-card:hover {
  transform: translateY(-5px);
}

.book-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.book-info {
  padding: 15px;
}

.book-info h3 {
  margin: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author {
  color: #666;
  margin: 5px 0;
}

.price-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}
</style> 